<template>
  <div class="product-list-header" :class="{ logo: from }">
    <div class="slot" v-if="from == 'home' && config">
      <img class="logo-image" :src="config.site_mobile_logo" />
    </div>
    <div class="slot iconfont" @click="$router.go(-1)" v-else>&#xe64f;</div>
    <div class="common-search">
      <input
        type="text"
        :placeholder="placeholderText"
        readonly="true"
        autocomplete="off"
        v-model="keyword"
        @click="onSearch"
      />
    </div>
    <div class="right iconfont" @click="goNews">
      <i class="nav-icon iconfont">&#xe6ce;</i>
      <!-- <div>99+</div> -->
      <span v-if="this.user.new_mail_count">{{user.new_mail_count}}</span>
    </div>

    <!-- <div class="right iconfont" @click="popupMore">
      &#xe680;
      <div v-if="showDot" class="dot"></div>
    </div>-->
    <header-more v-show="popupVisible" :showDot="showDot"></header-more>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getChatCount } from "../../../api/memberChat";
import HeaderMore from "../..//HeaderMore";
import {getMemberIndex} from '../../../api/member'
export default {
  name: "HomeCommonSearch",
  components: {
    HeaderMore,
  },
  props: ["value", "from", "type"],
  watch: {
    value: function (value) {
      if (value) {
        this.keyword = value;
      }
    },
  },
  data() {
    return {
      keyword: this.value ? this.value : "", // 关键字
      popupVisible: false,
      showDot: false,
      user:{},
    };
  },
  created: function () {
    if (this.isOnline) {
      getChatCount().then((res) => {
        if (res.result) {
          this.showDot = {};
          this.showDot["chat"] = true;
        }
      }),
        getMemberIndex().then(
          (response) => {
            if (response && response.result.member_info) {
              this.user = response.result.member_info;
              console.log(this.user.new_mail_count)
            }
          },
          (error) => {}
        );
    }
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config,
      isOnline: (state) => state.member.isOnline,
    }),
    placeholderText() {
      switch (this.from) {
        case "information":
          return "请输入您要搜索的文章";
          break;
        default:
          return "请输入您要搜索的商品";
      }
    },
  },
  methods: {
    goNews() {
      if (this.isOnline) {
        this.$router.push({ name: "MemberNoticeList" });
      } else {
        this.showLogin();
      }
    },
    showLogin() {
      this.$router.push({ name: "HomeMemberLogin" });
    },
    onSearch() {
      this.$router.push({
        name: "HomeSearch",
        params: { isFromHome: true, from: this.from, type: this.type },
      });
    },
    popupMore() {
      if (!this.popupVisible) {
        this.popupVisible = true;
      } else {
        this.popupVisible = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.right {
  position: relative;

  span {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 15px;
    height: 15px;
    line-height: 15px;
    background: red;
    border-radius: 50%;
    font-size: 12px;
    color: #ffffff;
  }
}
.right .iconfont {
  font-size: 1.2rem;
  padding-right: 0.5rem;
}
// .hader-icom{
//   width: 2rem !important;
//   height: 2rem !important;
//   line-height: 2rem;
//   text-align: center;

//     i{
//      font-size: 1rem;
//     }
// }
.dot {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: red;
  border-radius: 50%;
  top: 0.2rem;
  right: 0;
}
.product-list-header.logo {
  .slot {
    width: 2.5rem;
    text-align: center;
    line-height: 1.6rem;
    img {
      max-height: 100%;
      max-width: 100%;
    }
  }
  .common-search {
    padding: 0.35rem 0.3rem 0.35rem 0.3rem;
  }
}
.product-list-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  width: 100%;
  height: 2rem;
  padding: 00.25rem;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  background: #fff;
  .slot {
    width: 1.6rem;
    font-size: 0.8rem;
  }
}
.common-search {
  flex: 1;
  padding: 0.35rem 0.3rem 0.35rem 0;
}
.common-search input {
  box-sizing: border-box;
  width: 100%;
  height: 1.6rem;
  border-radius: 0.2rem;
  background: #ededed url(../../../assets/image/home/icon_search.png) no-repeat
    0.6rem center;
  background-size: 0.55rem;
  font-size: 0.7rem;
  color: #999;
  padding-left: 1.6rem;
  border: 0;
}
.right {
  width: 1.6rem;
  height: 1.6rem;
  text-align: center;
  line-height: 1.6rem;
  position: relative;
}
.logo-image {
  width: 2rem;
  height: 2rem;
}
</style>
